<template>
  <div class="home">
    <div class="cover">
      <div class="userinfo">
        <div class="head">
          <img :src="blogger.headImg" alt="" />
        </div>
        <div class="name">{{ blogger.nickname }}</div>
        <div class="personality">
          <!-- {{ blogger.personalSignature }} -->
          <span></span>
          <!-- <VueTypedJs :strings="[blogger.personalSignature]"></VueTypedJs> -->
        </div>
      </div>
    </div>
    <!-- 关于我 -->
    <div class="aboutMe section">
      <div class="content">
        <div class="title">About Me</div>

        <p v-for="(item, index) in aboutMe" :key="index">
          {{ item }}
          <!-- 吾为潇湘人氏,一介布衣，笔名有余，暂落于星城，苟全于现世，现二十有多矣。吾生不才，混迹江湖多年，无门无派，紧谋得口生计，其一无所成！！！ -->
        </p>
        <!-- <p>
          别无它好，于生活，乐于羽球，健身，厨艺尚可，于技艺，喜于设计，忠于产品，热于技术，且闲时喜好瞎折腾！
        </p>
        <p>
          除却聪智，其余尚可，亦不勤学,望将勤补拙，虽不才，且尚有容人之量，亦有荐人之贤，上可厅堂，下可厨房，外可御敌，内可缝衣，盼终成大器....
        </p> -->
      </div>
    </div>
    <!-- 我的书单 -->
    <div class="booklist section">
      <div class="content">
        <div class="title">我的书单📚</div>
        <div class="subtitle">一个老百姓的自我修养!</div>
        <book-item @click="findBookDetail" :lists="bookList"></book-item>
      </div>
    </div>

    <!-- 我的项目 -->
    <div class="project section">
      <div class="content">
        <div class="title">开源&项目🍟</div>
        <div class="subtitle">为开源尽一份力~</div>
        <project-item :lists="projectList"></project-item>
      </div>
    </div>

    <!-- slogan -->
    <div class="slogan-section">
      <div
        :style="{ 'background-image': `url(${endContent.url})` }"
        class="slogan"
      >
        <div class="text">{{ endContent.text }}</div>
      </div>
    </div>

    <!-- footer -->
    <div class="footer">
      <div class="title">
        <span style="color: #ed686d">理想</span>
        <span style="color: #7c86ee">浪漫</span>
        <span style="color: #74be6e">务实</span>
        <span style="color: #e6b95a">情怀</span>
      </div>
      <div class="text">行路有良友,便是捷径,期待与你相识</div>
    </div>
    <div class="leave-message">
      <leave-message></leave-message>
    </div>

    <book-detail
      :bookDetail="bookDetail.data"
      v-model="bookDetail.show"
    ></book-detail>
  </div>
</template>

<script>
import bookItem from "@/components/book-item/book-item.vue";
import projectItem from "@/components/project-item/project-item.vue";
import leaveMessage from "@/components/leave-message/leave-message";
import bookDetail from "@/components/book-detail/book-detail";
export default {
  name: "WorkspaceJsonHome",
  components: {
    bookItem,
    projectItem,
    leaveMessage,
    bookDetail,
  },
  data() {
    return {
      typedInit: false,
      bookList: [],
      projectList: [],
      projectTotal: [],
      bookDetail: {
        show: false,
        data: {},
      },
    };
  },

  computed: {
    blogger() {
      return this.$store.state.blogger;
    },
    aboutMe() {
      return this.$store.state.systemInfo.aboutMe;
    },
    endContent() {
      let systemInfo = this.$store.state.systemInfo || {};
      return systemInfo.end || {};
    },
  },
  watch: {
    blogger: {
      immediate: true,
      deep: true,
      handler() {
        this.setTyped();
      },
    },
  },
  mounted() {
    this.getBooklist();
    this.getProjectList();
  },
  methods: {
    setTyped() {
      // 打字机效果
      this.$nextTick(() => {
        if (this.blogger.personalSignature && !this.typedInit) {
          this.typedInit = true;
          var typed = new Typed(".personality span", {
            strings: [this.blogger.personalSignature], //输入内容, 支持html标签
            typeSpeed: 50, //打字的速度
            smartBackspace: true, // 开启智能退格 默认false
            backSpeed: 50, //后退速度
            backDelay: 5000, //后退延迟
            loop: true, //是否循环 默认false
            startDelay: 1000, //起始时间
            fadeOut: false, //淡出效果
          });
        }
      });
    },
    getBooklist() {
      this.$http("getBooklist", { pageSize: 4 }).then((res) => {
        this.bookList = res.data.lists;
      });
    },
    getProjectList() {
      this.$http("getProjectList", { pageSize: 2 }).then((res) => {
        this.projectList = res.data.lists;

        this.projectTotal = res.data.total;
      });
    },
    async findBookDetail(item) {
      this.bookDetail.data = item;
      this.bookDetail.show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
}
.cover {
  width: 100%;
  height: 100vh;
  background: #fff;
  background-image: url("https://dongping-blog.oss-cn-hangzhou.aliyuncs.com/systemImage/097ad13f000f488bb94ffafa4444313d.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
  &::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .userinfo {
    width: 80%;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    text-align: center;
    letter-spacing: 1.2px;

    .head {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      border: 5px solid rgba(0, 0, 0, 0.5);
      margin: auto;
      transition: all 0.5s;
      &:hover {
        transform: rotate(360deg);
      }
    }
    .name {
      font-size: 26px;
      color: #fff;
      font-weight: 600;
      padding: 20px 0;
    }
    .personality {
      display: inline-block;
      color: #fff;
      background: rgba(0, 0, 0, 0.5);
      padding: 8px 20px;
      border-radius: 40px;
      border-radius: 6px;
      opacity: 0.8;
    }
  }
}

.section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding-top: 1px;
  margin-bottom: 50px;
  .content {
    max-width: 500px;
    .title {
      font-weight: 600;
      font-size: 24px;
      color: #333;
      text-align: center;
      padding: 40px 0;
    }
  }
}

.aboutMe {
  background: #aca0ad;
  .content {
    max-width: 500px;
    margin-top: 100px;
    color: #fff;
    letter-spacing: 1.5px;
    padding: 0 25px;
    .title {
      color: #fff;
    }
    p {
      text-indent: 30px;
      margin-bottom: 10px;
      text-align: justify;
      line-height: 30px;
    }
  }
}

.booklist {
  min-height: 90%;
  .content {
    max-width: 800px;
    .title {
      margin-top: 50px;
      padding-bottom: 5px;
    }
    .subtitle {
      padding-bottom: 120px;
      text-align: center;
      font-size: 14px;
      color: #999;
    }
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-wrap: wrap;
    .item {
      flex: 1;
      min-width: 350px;
      height: 130px;
      background: #fff;
      border-radius: 10px;
      margin: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
      display: flex;
      margin-bottom: 80px;
      .cover {
        height: 130px;
        padding: 20px 15px 10px;
        text-align: center;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
        position: relative;
        top: -60px;
        margin-left: 20px;
        img {
          width: auto;
          height: 100%;
          object-fit: cover;
        }
      }

      .info {
        padding: 15px 10px;
        margin-left: 5px;
        p {
          color: #999;
          font-size: 14px;
          &:nth-child(1) {
            color: #333;
            font-weight: 600;
            font-size: 16px;
          }

          &:nth-child(2) {
            margin-top: 2px;
          }
          &:nth-child(3) {
            @include main-text-hidden(2);
          }
        }
      }
    }

    .item-placeholder {
      opacity: 0;
      height: 0;
    }
  }
}

.project {
  min-height: 60vh;
  padding-bottom: 80px;
  background: #332b31;
  .content {
    max-width: 800px;
    .title {
      margin-top: 50px;
      padding-bottom: 5px;
      color: #fff;
    }
    .subtitle {
      padding-bottom: 60px;
      text-align: center;
      font-size: 14px;
      color: #fff;
      opacity: 0.6;
    }
  }
}

.slogan-section {
  padding: 80px 20px;

  .slogan {
    max-width: 600px;
    height: 160px;
    letter-spacing: 1.2px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    // background-image: url("https://dongping-blog.oss-cn-hangzhou.aliyuncs.com/systemImage/1cb3d9ad7ec64d45895bde132002a0ed.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    .text {
      font-weight: 600;
      color: #fff;
      position: relative;
      z-index: 99;
      padding: 0 10px;
      text-align: center;
    }
    &::before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
}

.footer {
  padding: 100px 0;
  text-align: center;
  letter-spacing: 1.2px;
  color: #333;
  .title {
    span {
      margin: 0 10px;
    }
  }
  .text {
    padding: 20px 0;
    opacity: 0.8;
  }
}

.leave-message {
  max-width: 800px;
  margin: auto;
  padding: 0 15px 100px 8px;
  box-sizing: border-box;
}
</style>
